import React, { useRef, useState } from 'react';
import { Button, Dropdown, Space } from 'antd';
import '../../style/kuangjia.css';
import { useGlobalContext } from '../GlobalContext';
import SongListlist from './songListlist';

const genalSonglist = ({ songData }) => {
  const {
    userId, setUserId,
    favsongrefresh,
    setFavsongRefresh,
    playerlistfresh, setPlayerlistRefresh,
    currentIndex, setCurrentIndex,
    favsongListrefresh, setFavSonglistRefresh,
    playingDatalength, setPlayingDatalength, } = useGlobalContext();

  // const handleSongPlayClick = async (song) => {
  //   try {
  //     const response = await fetch("http://localhost:8088/playing", {
  //       method: "POST",
  //       headers: {
  //         "Content-Type": "application/json",
  //       },
  //       body: JSON.stringify(song),
  //     });

  //     if (!response.ok) {
  //       throw new Error("Failed to add song to songlist");
  //     }
  //     setPlayerlistRefresh(!playerlistfresh);
  //   } catch (error) {
  //     console.error("Error handling add song to songlist request: ", error);
  //   }
  // };

  const ulRef = useRef(null);

  const formatDuration = (duration) => {
    const minutes = Math.floor(duration / 60000);
    const seconds = ((duration % 60000) / 1000).toFixed(0);
    return (minutes < 10 ? '0' : '') + minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
  };

  //添加到bofang
  const handeladdSongTolist = async (songId) => {
    const song = songData.find((s) => s.musicId === songId);
    const songPost = {
      musicId: song.musicId,
      musicName: song.musicName,
      artName: song.artName,
      album: song.album,
      coverUrl: song.coverUrl,
      playUrl: song.playUrl,
      lyricUrl: `http://localhost:3000/lyric?id=${song.musicId}`,
      dt: song.dt,
      liked: song.liked,
      songIndex: playingDatalength + 1
    };
    try {
      const response = await fetch("http://localhost:8088/playing", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(songPost),
      });

      if (!response.ok) {
        throw new Error("Failed to update favor status");
      }
      setPlayerlistRefresh(!playerlistfresh)
    } catch (error) {
      console.error("Error handling favor request: ", error);
    }
  }

  //添加歌曲到歌单
  const [songsend, setSongsend] = useState({})
  const [songListlistvisible, setSongListlistvisible] = useState(false)
  const handleopenclick = (songId) => {
    setSongListlistvisible(true);
    const song = songData.find((s) => s.musicId === songId);
    setSongsend({
      musicId: song.musicId,
      musicName: song.musicName,
      artName: song.artName,
      album: song.album,
      coverUrl: song.coverUrl,
      playUrl: song.playUrl,
      lyricUrl: `http://localhost:3000/lyric?id=${song.musicId}`,
      dt: song.dt,
      liked: song.liked,
      userId,
    })
  }
  const handlesongListlisVisible = (visible) => {
    setSongListlistvisible(visible);
  }

  //播放歌单

  const handleDeleteAll = async () => {
    try {
      const response = await fetch('http://localhost:8088/playing/deleteall', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
      });

      if (!response.ok) {
        throw new Error('Failed to delete all songs');
      }
      // setPlayerlistRefresh(!playerlistfresh);

    } catch (error) {
      console.error('Error deleting all songs:', error);
    }
    // setCurrentIndex(0)
  };
  const handleSongPlayClick = async (index) => {
    try {
      // 检查数据库是否存在数据
      const checkResponse = await fetch("http://localhost:8088/playing", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
      });
      const playingData = await checkResponse.json();
      if (playingData.data.length > 0) {
        // 如果存在数据，先清空播放列表
        await handleDeleteAll();
      }

      // 添加当前歌单到播放列表
      const response = await fetch("http://localhost:8088/playing/all", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(songData),
      });
      if (!response.ok) {
        throw new Error("Failed to update playing list");
      }

      // 设置全局变量和刷新状态
      setCurrentIndex(index);
      setPlayerlistRefresh(!playerlistfresh);
      console.log("Successfully added songs to the playing list");
    } catch (error) {
      console.error("Error handling song list update: ", error);
    }
  };

  //取消收藏
  const handlelikecancel = async (songId) => {
    try {
      const response = await fetch(`http://localhost:8088/favor/${songId}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        throw new Error("Failed to remove song from favorites");
      }
      setFavsongRefresh(!favsongrefresh)
      setPlayerlistRefresh(!playerlistfresh);
    } catch (error) {
      console.error("Error handling favor request: ", error);
    }
  }



  const items = (songId) => [
    {
      key: '1',
      label: (
        <a
          href="#"
          onClick={(e) => {
            e.preventDefault(); // 阻止默认行为
            const song = songData.find((s) => s.musicId === songId); // 获取当前歌曲
            if (song.liked) {
              alert("歌曲已收藏");
            } else {
              handleLikeClick(song.musicId); // 执行收藏/取消收藏操作
            }
          }}
        >
          收藏
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          下载
        </a>
      ),
    },
    {
      key: '3',
      label: (
        <a onClick={() => { handleopenclick(songId) }}>
          添加到歌单
        </a>
      ),
    },
    {
      key: '4',
      label: (
        <a onClick={() => handeladdSongTolist(songId)}>
          添加到播放
        </a>
      ),
    },
  ];

  return (
    <div className="search_songlist">
      <div className="serch_nav">
        <div>歌名/歌手</div>
        <div className="serch_nav_right">
          <div>专辑</div>
          <div>时长</div>
        </div>
      </div>
      <ul className="lisMain2" ref={ulRef}>
        {songData.map((item, index) => (
          <li key={index} onDoubleClick={() => handleSongPlayClick(index)}>
            <div className="hideicon">
              <i className="ri-play-fill"></i>
            </div>
            <div className="search_songlist_left">
              <div className="song_information">
                <img src={item.coverUrl} alt={item.musicName} />
                <div className="song_name">
                  <span id="songname">{item.musicName}</span>
                  <span id="singer">{item.artName}</span>
                </div>
              </div>
              <div className="dowhat">
                <i
                  onClick={() => handlelikecancel(item.musicId)}
                  className="ri-heart-3-fill"></i>
                <div className="menu">
                  <Space direction="vertical">
                    <Space wrap>
                      <Dropdown
                        menu={{
                          items: items(item.musicId),
                        }}
                        placement="topLeft"
                        trigger={['click']}
                      >
                        <i className="ri-menu-4-line"></i>
                      </Dropdown>
                    </Space>
                  </Space>
                </div>
              </div>
            </div>
            <div className="search_songlist_right">
              <div id="songalbum">{item.album}</div>
              <div id="songduration">{formatDuration(item.dt)}</div>
            </div>
          </li>
        ))}
      </ul>
      {songListlistvisible && <SongListlist onviblechange={handlesongListlisVisible} songsend={songsend} />}

    </div>
  );
};

export default genalSonglist;
